<template>
  <div id="cesiumContainer" class="fullSize"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';
import CesiumNavigation from 'cesium-navigation-es6';

import { CesiumNavigationOptions } from './cesium/initViewer';

import MousePosition from './cesium/MousePosition';
import './Widgets/widgets.css';

// 设置cesium 静态资源路径
window.CESIUM_BASE_URL = '/';
Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNDkwYWVhOS0wNzI5LTQ3OTEtOWFiMC1kY2M3MTFiM2I2NWQiLCJpZCI6MTkyNTU1LCJpYXQiOjE3MDY1MTM0MTh9.YAPVHr1d7PBuWayCXM9deCxKg3AbtsXUJiVpubVS3NY';

// https://blog.csdn.net/yangwqi/article/details/105415328
var czml = [
  {
    id: 'document',
    name: 'CZML Point - Time Dynamic',
    version: '1.0',
  },
  {
    id: 'point',
    availability: '2012-08-04T16:00:00Z/2012-08-04T16:05:00Z',
    position: {
      epoch: '2012-08-04T16:00:00Z',
      cartographicDegrees: [
        0, 70, 20, 150000, 100, -80, 44, 150000, 200, -90, 18, 150000, 300, -98,
        52, 150000,
      ],
    },

    billboard: {
      image:
        '',
      scale: 0.5,
    },
    path: {
      resolution: 1,
      material: new Cesium.PolylineGlowMaterialProperty({
        glowPower: 0.1,
        color: Cesium.Color.YELLOW,
      }),
      width: 3,
    },
  },
];

onMounted(async () => {
  // const viewer = initViewer();
  const viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox: false,
    selectionIndicator: false,
    shadows: true,
    shouldAnimate: true,
    sceneMode: 2,
  });

  viewer.dataSources.add(Cesium.CzmlDataSource.load(czml)).then(function (ds) {
    var s = ds.entities.getById('point');
    s.orientation = new Cesium.VelocityOrientationProperty(s.position);
    s.billboard.alignedAxis = new Cesium.VelocityVectorProperty(
      s.position,
      true
    );
  });
});
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
#cesiumContainer {
  height: 90vh;
  width: 90vw;
}
</style>
